<template>
  <div id="tag"></div>
</template>

<script>
import * as PIXI from 'pixi.js'
// /绘制图形
export default {
  name: 'Home',
  mounted() {
    let _this = this
    this.$nextTick(() => {
      _this.initPixi()
    })
  },
  methods: {
    initPixi() {
      const options = {
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: 0x1099bb,
        resolution: window.devicePixelRatio || 1,
        antialias: true
      }
      // 创建应用
      const app = new PIXI.Application(options)
      // 将应用画布添加到DOM中
      document.querySelector('#tag').appendChild(app.view)

      // 绘制矩形=============================
      const rectangle = new PIXI.Graphics()
      // 设置边框样式
      rectangle.lineStyle(4, 0xff0000, 1) // 线宽，颜色，透明度
      rectangle.beginFill(0xffffff, 1) // 填充颜色，透明度
      rectangle.drawRect(0, 0, 50, 50) // 绘制矩形
      rectangle.endFill() // 结束填充
      // 图形缩放
      rectangle.scale.set(2, 2)
      // 图形位移
      rectangle.position.set(100, 100)
      // 图形旋转
      rectangle.rotation = 0.8
      // 图形锚点
      rectangle.pivot.set(10, 12)
      // 将矩形添加到画布
      app.stage.addChild(rectangle)

      // 绘制圆形=============================
      const circle = new PIXI.Graphics()
      circle.beginFill(0x66ccff, 0.9)
      circle.drawCircle(0, 0, 32)
      circle.endFill() // 结束填充
      circle.position.set(300, 300)
      app.stage.addChild(circle)

      // 绘制圆角矩形=============================
      const roundedRectangle = new PIXI.Graphics()
      roundedRectangle.beginFill(0x66ccff, 0.9)
      // drawRoundedRect(x: number, y: number, width: number, height: number, radius: number)
      roundedRectangle.drawRoundedRect(0, 0, 164, 164, 10)
      roundedRectangle.endFill() // 结束填充
      roundedRectangle.position.set(600, 600)
      app.stage.addChild(roundedRectangle)

      // 绘制椭圆=============================
      const ellipse = new PIXI.Graphics()
      ellipse.beginFill(0x66ccff, 0.9)
      // drawEllipse(x: number, y: number, width: number, height: number)
      ellipse.drawEllipse(0, 0, 120, 164)
      ellipse.endFill() // 结束填充
      ellipse.position.set(500, 500)
      app.stage.addChild(ellipse)

      // 绘制多边形=============================
      const polygon = new PIXI.Graphics()
      polygon.beginFill(0x660000, 0.9)
      // 绘制多边形,参数为数组
      polygon.drawPolygon([0, 0, 100, 0, 100, 100, 0, 100])
      polygon.endFill() // 结束填充
      polygon.position.set(50, 300)
      app.stage.addChild(polygon)

      // 绘制圆弧=============================
      const arc = new PIXI.Graphics()
      arc.beginFill(0x70eb77, 1)
      // PIXI.Graphics.arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number)
      arc.arc(0, 0, 32, Math.PI / 2, false)
      arc.endFill() // 结束填充
      arc.position.set(800, 80)
      app.stage.addChild(arc)

      // 绘制线段=============================
      const line = new PIXI.Graphics()
      line.lineStyle(4, 0xed6341, 1)
      line.moveTo(0, 0) // 线段开始位置
      line.lineTo(100, 100) // 线段结束位置
      line.lineTo(200, 1)
      line.position.set(800, 120)
      app.stage.addChild(line)
    }
  }
}
</script>
<style>
#tag {
  width: 100%;
  height: 100%;
}
</style>
